<template>
  <div class="app-container">
	  <div>
		  <div>缴费类型数据统计</div>
		  <div id='box' style="width: 100%;height: 500px;"></div>
	  </div>
	  <div>	  	
	  	<div id='month' style="width: 100%;height: 500px;"></div>
	  </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      quertData: {
        payment_status: "", // 缴费状态:已缴费 未缴费
        start_date: "2024-12-20",
        end_date: "2024-12-30",
      },
      summaryData: {}, //总的费用
      dailyData: {}, //日常数据
      apiPath: "member.Billing",
	  summaryList:[] ,//总的费用的名称
	  summarySeriesList:[],////总的费用的数据
	  
    }
  },
  mounted() {
	 //获取账单统计数据
	 this.getAmountList();   	
  },
  methods: {
    getAmountList() {
      this.$api.getAllCountData(this.quertData, this.apiPath).then((res) => {
        this.summaryData = res.summary;
        this.dailyData = res.daily;
		//缴费类型数据统计
		this.getSummaryData(this.summaryData); 		
		//日常费用统计
		this.getDailyData(this.dailyData);
			   
      });
    },
	//缴费类型数据统计
    getSummaryData(summaryData) {
	 this.summaryList = Object.keys(summaryData);
	 this.summarySeriesList  = Object.values(summaryData)	
      let myChart = echarts.init(document.getElementById('box'));
     // 绘制图表	       
       myChart.setOption({
		color:[ '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],  
      	 xAxis: {
      	    type: 'category',
      	    data:this.summaryList
      	  },
      	  yAxis: {
      	    type: 'value'
      	  },
      	  series: [
      	    {
      	      data:this.summarySeriesList,
      	      type: 'bar'
      	    }
      	  ]
      });   

    },
	//日常费用统计
	getDailyData(dailyData){
		let dailyXList = Object.keys(dailyData);
		let  dailyYList = Object.values(dailyData);
		let name0 = dailyXList[0];
		let dataY0 = Object.values(dailyYList[0]);
		let name1,dataY1
		if(dailyXList[1]){
			name1 = dailyXList[1];
			 dataY1 = Object.values(dailyYList[1]);
		}
		let name2,dataY2
		if(dailyXList[2]){
			name2 = dailyXList[2];
			 dataY2 = Object.values(dailyYList[2]);
		}
		// let name2 = dailyXList[2];
		// let dataY2 = Object.values(dailyYList[2]);	
		// let name3 = dailyXList[3];
		// let dataY3 = Object.values(dailyYList[3]);	
		// let name4 = dailyXList[4];
		// let dataY4 = Object.values(dailyYList[4]);
		// let name5 = dailyXList[5];
		// let dataY5 = Object.values(dailyYList[5]);	
		// let name6 = dailyXList[6];
		// let dataY6 = Object.values(dailyYList[6]);	
		// let name7 = dailyXList[7];
		// let dataY7 = Object.values(dailyYList[7]);
		// let name8 = dailyXList[8];
		// let dataY8 = Object.values(dailyYList[8]);
		// let name9 = dailyXList[9];
		// let dataY9 = Object.values(dailyYList[9]);
		var myChart = echarts.init(document.getElementById('month'));		
		// 绘制图表
		  myChart.setOption({ 		  
		  title: {
		    text: '日常缴费类型数据统计'
		  },
		  tooltip: {
		    trigger: 'axis'
		  },		 
		  grid: {
		    left: '3%',
		    right: '4%',
		    bottom: '3%',
		    containLabel: true
		  },
		  toolbox: {
		    feature: {
		      saveAsImage: {}
		    }
		  },
		  xAxis: {
		    type: 'category',
		    boundaryGap: false,
		    data:["电费","水费","保证金","押金","商管费","租金"]			
		  },
		  yAxis: {
		    type: 'value'
		  },
		  series: [
		    {
		         name: name0,
		         type: 'line',
		         stack: 'Total',
		         data:dataY0
		       },
			 { 
			      name: name1,
			      type: 'line',
			      stack: 'Total',
			      data:dataY1
			    },  
		  {
		       name: name2,
		       type: 'line',
		       stack: 'Total',
		       data:dataY2
		     },
			//  {
			//       name: name3,
			//       type: 'line',
			//       stack: 'Total',
			//       data:dataY3
			//     },
			// {
			//      name: name4,
			//      type: 'line',
			//      stack: 'Total',
			//      data:dataY4
			//    },
			//    {
			//         name: name5,
			//         type: 'line',
			//         stack: 'Total',
			//         data:dataY5
			//       },
			// {
			//      name: name6,
			//      type: 'line',
			//      stack: 'Total',
			//      data:dataY6
			//    },
			// {
			//      name: name7,
			//      type: 'line',
			//      stack: 'Total',
			//      data:dataY7
			//    },
			// {
			//      name: name8,
			//      type: 'line',
			//      stack: 'Total',
			//      data:dataY8
			//    },
			// {
			//      name: name9,
			//      type: 'line',
			//      stack: 'Total',
			//      data:dataY9
			//    },			   
		  ]
		
		});
	}
  }
}
</script>